<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>用户聊天页面</title>


    <script type="text/javascript" src="/h5/newall/newall.js"></script>


    <script type="text/javascript" src="/h5/js/all2.js"></script>

    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css">


</head>
<body>

<div class="mui-content-padded H5body">

    <MCform id="jiguangWinMCform"
            class="mctag jiguangWin">
        <MCtitle class="mctag">用户聊天页面</MCtitle>
        <div class="content speak_window">
            <ul mcname="msglist" id="scrollDiv" class="ul ">

                <li v-for="obj in msglist" class="msgli" v-bind:class="{ismymsg:obj.isme}">
                    <div class="more">
                        <span class="timedate">{{obj.create_time}}</span>
                        <span style="display: none" class="isread">未读</span>
                    </div>
                    <div class="conli clearfix">
                        <div class="avatar">
                            <img :src="obj.avaPic" class="avaPic"/>
                        </div>
                        <div class="msgcontent" v-if="obj.msg_type=='text'">
                            <p class="msgtext">{{obj.text}}</p>
                        </div>
                        <div class="msgcontent" v-if="obj.msg_type=='image'">
                            <div class="imgpicDiv">
                                <img :src="obj.text" @load='loadImg' :picurl="obj.text" class="imgpic msgPic"/>
                            </div>
                        </div>
                        <div class="msgcontent" v-if="obj.msg_type=='custom'">
                            <div class="PicTitleDesc">
                                <p class="mtitle">{{obj.title}}</p>
                                <div class="msgtitledesc clearfix">
                                    <p class="mdesc">{{obj.desc}}</p>
                                    <img :src="obj.pic" class="fengmianpic" />
                                </div>
                            </div>
                        </div>
                    </div>
                </li>


            </ul>
        </div>



    </MCform>
    <div class="inputDiv">
        <div class="toolbar">
            <a class="upfilepicIco">
                <input type="file">
            </a>
        </div>
        <div class="textareaDiv">
            <textarea maxlength="140" id="quest" class="valtext"></textarea>
            <a class="btn mui-btn mui-btn-primary btnSend ">发送</a>
        </div>

    </div>

</div>
<style>

    .PicTitleDesc{
        width: 2.1rem;
    }
    .PicTitleDesc .mtitle{
        color: #0b0b0b;
        font-size: 0.19rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .PicTitleDesc .msgtitledesc{
        width: 100%;
        position: relative;
        margin-top: 0.07rem;
    }
    .PicTitleDesc .msgtitledesc .mdesc{
        float: left;
        width: 1.55rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .PicTitleDesc .msgtitledesc .fengmianpic{
        float: right;
        width: 0.5rem;
        height: 0.5rem;
        position: relative;
    }






    html body{
        height: 100%;
    }
    .TitleBarBu{
        display: none;
    }
    .jiguangWin .msgli.ismymsg .conli .avatar {
        float: right;
    }

    .jiguangWin .msgli.ismymsg .conli .msgcontent {
        float: right;
        margin-right: 0.1rem;
    }

    .upfilepicIco {
        background-image: url(/h5/images/pic.svg);
        position: relative;
        top: 0.025rem;
        width: 0.22rem;
        height: 0.22rem;
        background-size: 100% 100%;
        display: block;
        margin-left: 0.05rem;
        overflow: hidden;
        margin-right: 0.1rem;
    }

    .upfilepicIco [type=file] {
        width: 100%;
        height: 100%;
        padding: 0;
        opacity: 0;
    }

    MCform.mctag {
        height: 80%;
        margin-bottom: 0;
    }

    .mctag .speak_window {
        padding-top: .4rem;
        padding-bottom: 0.4rem;
        height: 100%;
        position: relative;
        overflow-y: scroll;
    }

    .H5body, .jiguangWin {
        height: 100%;
        background-color: #f8f8f8;
    }

    .inputDiv {
        position: relative;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 50;
        background-color: white;
        height: 20%;
    }

    .inputDiv .toolbar {
        width: 100%;
        height: 0.28rem;
        background-color: #f0f0f0;
        position: relative;
        z-index: 2;
    }

    .inputDiv .textareaDiv {
        position: relative;
        width: 98%;
        margin: 0 auto;
        height: 1rem;
    }

    .inputDiv .textareaDiv .valtext {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .inputDiv .textareaDiv .btnSend {
        position: absolute;
        right: 0.1rem;
        bottom: 0.1rem;
    }


    .jiguangWin .ul {
        width: 100%;
    }

    .jiguangWin .ul .msgli {
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .jiguangWin .ul .conli {
        width: 100%;
        position: relative;
    }

    .jiguangWin .ul .msgli .avatar {
        float: left;
        width: 0.45rem;
        height: 0.45rem;
    }

    .jiguangWin .ul .more span {
        color: silver;
    }

    .jiguangWin .ul .msgli .avatar .avaPic {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
    }

    .jiguangWin .ul .msgli .msgcontent {
        float: left;
        /* width: 2.5rem; */
        margin-left: 0.1rem;
        /* min-height: 0.5rem; */
        position: relative;
        background-color: #fff;
        padding: 0.1rem;
        max-width: 2.5rem;
        border-radius: 0.1rem;
        border: 0.01rem #dddddd solid;
    }

    .jiguangWin .ul .msgli .msgcontent .msgtext {
        display: inline;
        position: relative;
        font-size: 0.15rem;
        word-wrap: break-word;
    }

    .jiguangWin .ul .msgli .more {
        width: 100%;
        margin-top: 0.1rem;
        text-align: center;
    }

    .jiguangWin .ul .msgli .msgcontent .imgpicDiv {
        width: 100%;
        position: relative;
        max-height: 1.5rem;
        overflow: hidden;
    }

    .jiguangWin .ul .msgli .msgcontent .imgpicDiv .isloadPic{
        width: 0.25rem;
        margin: 0.3rem;
    }




    .jiguangWin .ul .msgli .msgcontent .imgpic {
        width: 1rem;
        position: relative;

    }

    .w-e-panel-container .w-e-item img {
        width: 0.18rem;
        height: 0.18rem;
    }

    .w-e-text-container .w-e-panel-container {
        top: -1.9rem;
        background-color: white;
        z-index: 100;
    }

    .w-e-toolbar .w-e-menu {
        font-size: 0.2rem;
    }

    .jiguangWin img[data-w-e] {
        width: 0.18rem;
        height: 0.18rem;
        position: relative;
        top: 0.02rem;
    }

    .jiguangWin .w-e-text, .w-e-text p {
        font-size: 0.18rem;
    }

    .w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item {
        font-size: 0.18rem;
        padding: 0.05rem 0.05rem;
    }
</style>
<script type="text/javascript" src="/wangEditor.js"></script>
<script>
    var win = new MC.Call.MsgWin();


</script>
</body>
</html>